<template>
    <view class="wrap">
		<view :style="{ height: `${statusBarHeight}px` }"></view>
		        <!-- 自定义导航栏高度 并 居中 -->
		<view :style="{
		  height: `${barHeight}px`,
		  'line-height': `${barHeight}px`,
		  'text-align': 'center',
		}">
			<text>他说</text>
		</view>
		<view class="searchImgWrap">
			<view v-if="showInfo" class="searchLeft"></view>
			<view class="searchRight"></view>
		</view>
         <view class="title"><view class="dream">梦见<input  v-model="iptVls" placeholder=" | 如：蛇、打雷" /></view><view class="btn" @tap="changeUrl">搜索</view></view>
         <view class="dreamWrap">
			 <view class="oftenDream">大家经常做的梦</view>
			 <view class="btnWrap">
				<view class="btn" @tap="getChoosed(idx)"  v-for="(item,idx) in arr" :key="idx">{{ item.title }}</view>
			 </view>
         </view>
    </view>
</template>
 <script>
 import { getDrawNameAPI, getDrawTitleAPI } from '../../../utils/api'
 import { showInfoFunc } from '../../../utils/common'
 export default {
    data() {
      return {
		showInfo: false,
        iptVls:'',
		current:-1,
		statusBarHeight:'',
		barHeight:'',
		arr:[]
      }
    },
    async onShow(){
		this.iptVls = ''
        const res = await getDrawNameAPI();
        this.arr = res.result;
    },
	onLoad(){
		this.showInfo = showInfoFunc('解梦') == undefined ? false :  true
	},
	mounted() {
		// 状态栏高度
		this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight; 
		// 胶囊数据
		const { top, height } = wx.getMenuButtonBoundingClientRect();
		// 自定义导航栏高度 = 胶囊高度 + 胶囊的padding*2, 如果获取不到设置为38
		this.barHeight = height ? height + (top - this.statusBarHeight) * 2 : 38;
	},
    methods: {
        // 路由跳转
        async changeUrl(){
			if(this.iptVls == ''){
				uni.showToast({
					icon:'none',
					title:"请输入内容"
				})
			}else{
				const res = await getDrawTitleAPI(this.iptVls);
				this.arr = res.result;
			}
            
           
        },
        // 获取选择值
        getChoosed(idx){
            this.current = idx;
            uni.navigateTo({
                url:`../../../subPackagesA/pages/dreamRes/dreamRes?id=${this.arr[idx].id}`
            })
            // this.iptVls = this.arr[idx].title;
        },
        // 获取输入的值
        // getVls(e){
        //     this.iptVls = e.detail.value;
        //     console.log('e',e)
        // }
    }
 };
 </script>
 <style lang='less' scoped>
.oftenDream{
	color: #999;
}
.searchImgWrap{
	display: flex;
	justify-content: space-around;
	align-items: center;
	margin: 30rpx;
}
.searchLeft{
	width: 280rpx;
	height: 86rpx;
	background: url('https://ctrlsoft.net.cn/app_static/hesaid/img/oneiromancy/search.png') no-repeat;
	background-size: 100% 100%;
}
.searchRight{
	width: 248rpx;
	height: 340rpx;
	background: url('https://ctrlsoft.net.cn/app_static/hesaid/img/oneiromancy/searchImg2.png') no-repeat;
	background-size: 100% 100%;
}
.dream{
	background-color: #fff;
	display: flex;
	align-items: center;
	padding-left: 20rpx;
}
 .wrap{
	 background: url('https://ctrlsoft.net.cn/app_static/hesaid/img/oneiromancy/background.png') no-repeat;
	 background-size: 100% 100%;
     .title{
		position: relative;
		margin: -80rpx 30rpx 30rpx 30rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 36rpx;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #000000;
		background:#FE8022;
		border-radius: 16rpx;
		border: 12rpx solid #FE8022;
		z-index:99999;
        input{
            width: 400rpx;
            height: 80rpx;
            background: #fff;
            border-radius: 16rpx;
            padding-left: 20rpx;
        }
        .btn{
            width: 144rpx;
            height: 80rpx;
            line-height: 80rpx;
            text-align: center;
            background: #FF7F22;
            border-radius: 8rpx;
            color: #fff;
        }
     }
	 .dreamWrap{
		 background:#fff;
		 margin: 30rpx;
		 padding: 30rpx;
		 border-radius: 16rpx;
	 }
     .btnWrap{
         display: flex;
         justify-content: space-between;
         flex-wrap: wrap;
		 
         .btn{
             margin: 30rpx 0;
             width: 180rpx;
			 height: 82rpx;
             line-height: 82rpx;
             text-align: center;
			 color: #B44A05;
			 background: linear-gradient(180deg, #FFF0DC 0%, #FCF9EF 100%);
			 border-radius: 16rpx 16rpx 16rpx 16rpx;
			 border: 2rpx solid #FFE3D0;
			 padding: 0 10rpx;
			 white-space: nowrap;
			 overflow: hidden;
			 text-overflow: ellipsis;
         }
     }
 }
 </style>